<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js</title>
    <!--<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>-->
    <script src="./vue.min.js"></script>
</head>
<body>
<h1>数据绑定data v-text/v-html指令</h1>
<div id="test1"></div>
<h1>事件绑定methods v-on:click/@click</h1>
<div id="test2" @click="fun1">{{msg}}</div>
<h1>属性绑定data v-bind:id/:id</h1>
<div id="test3">
    <div :title="msg">属性绑定：v-bind:attr 相当于 :attr</div>
</div>
<h1>双向绑定data v-model</h1>
<div id="test4">
    <div>{{content}}</div>
    <input v-model="content"/>
</div>
<h1>计算属性和侦听器 computed and watch</h1>
<div id="test5">
    <div>一共计算了{{count}}次</div>
    <div>计算结果是{{num3}}</div>
    <div>
        <input v-model="num1"/>
        <input v-model="num2"/>
    </div>
</div>
<script>
    new Vue({
        el: "#test1",
        template: '<h2>Hello {{name}}!</h2>',
        data: {
            name: "World"
        }
    });
    new Vue({
        el: "#test2",
        data: {
            msg: "Hello Vue.js!"
        },
        methods: {
            fun1: function () {
                this.msg="Vue.js Hello!"
            }
        }
    });
    new Vue({
        el: "#test3",
        data: {
            msg: "这是提示语！哈哈哈哈"
        }
    });
    new Vue({
        el: "#test4",
        data: {
            content: "双向绑定！哈哈哈哈"
        }
    });
    var vm = new Vue({
        el: "#test5",
        data: {
            num1: 2,
            num2: 3,
            count: 0
        },
        computed: {
            // 计算num3的值
            num3: function () {
                return this.num1 * this.num2
            }
        },
        watch: {
            // 监听num3的变化
            num3: function () {
                this.count ++
            }
        }
    })
</script>
</body>
</html>